.header-content {
  width: 100%;
  max-width: 3.75rem;
  margin: 0 auto;
  height: 4.31rem;
     background-image: url("../../images/base/jackpotBg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 .16rem;
  .header-box {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left-option {
      width: .42rem;
      height: .4rem;
    }
    .right-option {
      padding: .07rem .16rem;
      display: flex;
      align-items: center;
      background: linear-gradient(
        315deg,
        #ee8233 0%,
        #fff5c7 50%,
        #fdcd9d 100%
      );
      box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
      border-radius: .16rem;
      .icon {
        width: .16rem;
        height: .16rem;
      }
      .txt {
        margin-left: .08rem;
        font-weight: 500;
        font-size: .12rem;
        color: #000000;
      }
    }
  }
  .end-box {
    margin-bottom: .16rem;
    width: 100%;
    box-sizing: border-box;
    padding:.16rem .12rem;
    position: relative;
    background: rgba(51, 49, 71, 0.35);
    border-radius: .16rem;
    backdrop-filter: blur(.5rem);
    // 使用伪元素实现渐变边框
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-top-left-radius: .16rem;
      border-top-right-radius: .16rem;
      padding: .02rem;
      background: linear-gradient(
        180deg,
        rgba(244, 232, 182, 1),
        rgba(244, 232, 182, 0.15)
      );
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: xor;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      z-index: -1;
    }

    .end-top-option {
      padding-top: .16rem;
      padding-bottom: .16rem;
      border-bottom: .01rem solid rgba(255, 255, 255, 0.15);
      .title {
        font-weight: 500;
        font-size: .12rem;
        color: #ffffff;
        text-align: center;
      }
      .number {
        margin-top: .08rem;
        font-weight: bold;
        font-size: .20rem;
        text-align: center;
        color: #ffffff;
      }
    }
    .end-bottom-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: .16rem;
      .item-box {
        flex: 1;
        .item-title {
          font-size: .12rem;
          color: rgba(255, 255, 255, 0.65);
        }
        .item-money {
          margin-top: .02rem;
          font-size: .12rem;
          color: #ffffff;
        }
      }
      .item-box-right {
        text-align: right;
      }
    }
  }
}
.bottom-box{
    padding-bottom: .5rem;
}
